<template>
	<view class="root-box root-container root-page-top">
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template v-slot:top>
				<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="收益提现"></uv-navbar>
				<view class="content">
					<view class="plan-box">
						<view class="cred fz20 mt-30">当前可提现收益(元)</view>
						<view class="plan-bt-row mt-20">
							<view class="cred fz30 fzW">{{twTotalMoney}}</view>
							<view class="plan-bt" @click="onActionWithdraw">提现</view>
						</view>
					</view>
					<view class="fz32 fzW mt-30 cdark">收益明细</view>
				</view>	
			</template>
		<view class="loop-container" v-for="(item,index) in dataList" :key="item.id">
			<view class="withdraw-bar-box">
				<view class="withdraw-bar-item">
					<view class="cdark fz28">收益提现</view>
					<view class="cred fz32 fzW">-{{item.total_price}}</view>
				</view>
				<view class="withdraw-bar-item mt-20">
					<view class="cgray fz22">时间:{{item.create_time}}</view>
				</view>
			</view>
		</view>
		</z-paging>
		
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		navigate,
		getDateStr
	} from '@/util/tools.js';
	
	
	import {
		technicianProfileIncomeList,
		technicianWithdrawalList
	} from '@/api/other.js'
	const twTotalMoney=ref(0)
	const dataList = ref([])
	const paging = ref(null)
	const queryList = (pageNo, pageSize) => {
		let param={
			page: pageNo,
			limit: pageSize,
			//month: getDateStr('ym')
			
		}
		console.log('0000param',param)
		technicianProfileIncomeList(param).then(res => {
			twTotalMoney.value=res.result.total_price
			paging.value.complete(res.result.data);
		}).catch(res => {
			paging.value.complete(false);
		})
	}
	const onActionWithdraw=()=>{
		navigate('/pages-skilled/withdraw/action')
	}
</script>

<style lang="scss" scoped>
	.root-box {
		
		.content {
			padding: 30rpx;
			box-sizing: border-box;

		}
	}
	
	.plan-box{
		box-sizing: border-box;
		padding: 30upx 30upx 90upx 30upx;
		border-radius: 20upx;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx #cccccc;
		width: 100%;
		background-image: url('https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0822/26cbd202508221432285903.png');
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 300upx 200upx;
	}
	.plan-bt-row{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.plan-bt{
		background-color: red;
		color: #fff;
		font-size: 20upx;
		padding: 5upx 30upx;
		border-radius: 40upx;
		box-sizing: border-box;
	}
	
	.withdraw-bar-box{
		margin-top: 30upx;
		background-color: #fff;
		border-radius: 10upx;
		box-shadow: 5upx 5upx 5upx #cccccc;
		padding: 30upx 30upx;
		box-sizing: border-box;
		
	}
	
	.withdraw-bar-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		
	}
	
	
	

</style>